{extend name="../app/index/view/layout/main.html" /}
//网站标题
{block name="title"}<title>精品推荐 - {$meta.appname}</title>{/block}

//css资源
{block name="link"}
<!-- 第三方库css -->
<link rel="stylesheet" href="__STATIC__/lib/layui/css/layui.css">
<link rel="stylesheet" href="__STATIC__/lib/swiper/css/swiper.css">

<!-- 自定义css -->
<link rel="stylesheet" href="__INDEX_STATIC__/css/common.css">
<link rel="stylesheet" href="__INDEX_STATIC__/css/app.css">
{/block}

//js资源
{block name="script"}
<script id="postsTpl" type="text/html">
  {{#  layui.each(d, function(index, item){ }}
  <li class="post-item">
    <div class="user-info">
      <a href="{{ item.authorUrl }}"><img class="avatar" src="{{ item.avatar }}"></a>
      <div class="user-profile">
        <span class="user-name">{{ item.username }}</span>
        ·
        <span class="post-time">{{ item.absoluteTime }}</span>
      </div>
    </div>

    <div class="post-body">
      <div class="post-left">
        <div class="post-info">
          <span><a class="cat" href="{{ item.categoryUrl }}">{{ item.category_name }}</a></span>
          {{#  if(item.topic_id){ }}
          <span><a class="top" href="{{ item.topicUrl }}">{{ item.topic_name }}</a></span>
          {{#  } }}
        </div>
        <h3 class="post-title">
          <a href="{{ item.articleUrl }}">{{ item.title }}</a>
        </h3>
        <p class="layui-hide-xs">{{ item.brief }}</p>
        <div class="post-like">
          <span><i class="layui-icon layui-icon-rate"></i>  {{ item.liked }}</span>
          <span><i class="layui-icon layui-icon-chat"></i>  {{ item.commented }}</span>
        </div>
      </div>
      {{#  if(item.imageUrl){ }}
      <div class="post-right">
        <img src="{{ item.imageUrl }}" class="heightsuit">
      </div>
      {{#  } }}
    </div>
  </li>
  {{#  }); }}
  {{#  if(d.length === 0){ }}
  无数据
  {{#  } }}
</script>
<script src="__STATIC__/lib/layui/layui.js"></script>
<script src="__INDEX_STATIC__/js/config.js"></script>
<script>
    'use strict';
    layui.use(['layer', 'jquery','posts','nav'], function(){
        let layer = layui.layer
            ,$ = layui.jquery
            ,posts = layui.posts;


        //分页
        posts.setFields(JSON.parse('{php}echo $where;{/php}')).init({
            pageElem : $('#pagination')[0],
            count: "{$count}",
            limit : "{$limit}",

            box: $('#post_box')[0],
            url: "{:url('article/list')}",
            tpl: $('#postsTpl').html()
        });


    });
</script>
{/block}

//站点主体
{block name="body"}
<!-- body -->
<section class="body top-25">
  <div class="layui-container">
    <div class="layui-row layui-col-space20">
      <!-- left -->
      <div class="layui-col-md3">
        <!-- subscribe -->
        <div class="subscribe-tab">
          <div class="subscribe-header">
            <h2 class="subscribe-tab-title">{$date.date}</h2>
            <div class="subscribe-tab-time">
              <span>{$date.en_date}</span>
              <span>{$date.cn_date}</span>
            </div>
          </div>
          <div class="subscribe-footer">
            <p>共订阅2个媒体<i class="layui-icon layui-icon-right"></i></p>
          </div>
        </div>
      </div>
      <!-- center -->
      <div class="layui-col-md6">
        <div class="block">

          <!-- posts -->
          <div class="posts">
            <div class="block-header flex-def flex-zBetween">
              <h2>
                <i class="layui-icon layui-icon-star best-icon"></i>
                精品推荐
              </h2>
            </div>
            <!-- post list -->
            <ul id="post_box">

            </ul>
          </div>

          <!-- pager -->
          <div id="pagination" class="flex-def flex-zCenter top-25">
            <div id="pager"></div>
          </div>

        </div>
      </div>
      <!-- right -->
      <div class="layui-col-md3">
        <!-- 文章 -->
        <div class="block hot-article">
          <div class="block-header flex-def flex-zBetween">
            <h2>热门文章</h2>
            <a href="{:url('index/hot')}" class="more">
              更多
              <i class="layui-icon layui-icon-right"></i>
            </a>
          </div>
          <ul class="hot-article-wrap">
            {if empty($activeArticles)}<li>无数据</li>{/if}
            {foreach $activeArticles as $item}
            <li class="hot-article-item">
              <a href="{:url('article/read',['id'=>$item.id])}">{$item.title}</a>
              {if $item.image}
              <div class="hot-img">
                <img src="{$item.imageUrl}">
              </div>
              {/if}
            </li>
            {/foreach}
          </ul>
        </div>

        <!-- 作者 -->
        <div class="block author top-25">
          <div class="block-header">
            <h2>推荐作者</h2>
            <a href="javascript:;" class="more">
              更多
              <i class="layui-icon layui-icon-right"></i>
            </a>
          </div>
          <div class="author-wrap">
            <ul>
              {if empty($activeAuthors)}无数据{/if}
              {foreach $activeAuthors as $item}
              <li class="author-item">
                <a class="avatar" href="{:url('user/read',['id'=>$item.id])}"><img src="{$item.avatarUrl}" alt=""></a>
                <div class="author-info">
                  <h3>{$item.showName}</h3>
                  <p>文章 {$item.articles_count}, 话题 {$item.topics_count}</p>
                </div>
              </li>
              {/foreach}
            </ul>
          </div>
        </div>

        <!-- 话题 -->
        <div class="block top-25 medium-card">
          <div class="block-header">
            <h2>推荐话题</h2>
            <a href="/index.php/index/topic/index?user_id=1" class="more">
              更多
              <i class="layui-icon layui-icon-right"></i>
            </a>
          </div>
          {if empty($activeTopics)}无数据{/if}
          {foreach $activeTopics as $item}
          <div>
            <div class="medium-top">
              <div>
                <img src="{$item.imageUrl}">
                <a href="{:url('topic/read',['id'=>$item.id])}"><h3>{$item.name}</h3></a>
              </div>
              <a href="javascript:;" class="focus">订阅</a>
              <!--<a class="unfocus" href="javascript:;">已订阅</a>-->
            </div>
            <div class="medium-bottom">
              {$item.desc}
            </div>
          </div>
          {/foreach}

        </div>

        <!-- 标签 -->
        <div class="block tags top-25">
          <div class="block-header">
            <h2>热门标签</h2>
            <a href="{:url('tag/index')}" class="more">
              更多
              <i class="layui-icon layui-icon-right"></i>
            </a>
          </div>
          <div class="tags-wrap">
            {if empty($activeTags)}无数据{/if}
            {foreach $activeTags as $item}
            <a href="{:url('tag/read',['id'=>$item.id])}"><span>{$item.name}</span></a>
            {/foreach}
          </div>
        </div>

      </div>
    </div>
  </div>
</section>
{/block}